1 00:00:00,630 --> 00:00:01,170 Hello. 2 00:00:01,160 --> 00:00:03,400 Welcome to this video. 3 00:00:03,810 --> 00:00:12,180 In this video we will be adding the javascript functionality to make BMI calculator work. 4 00:00:12,430 --> 00:00:20,850 Javascript relies on hasty e-mail has some time here says to be in place before he can work. 5 00:00:20,850 --> 00:00:23,510 So we've already caused csx. 6 00:00:23,670 --> 00:00:27,050 We've also got his mail already in place. 7 00:00:27,180 --> 00:00:30,860 So let's go ahead and add our javascript. 8 00:00:31,080 --> 00:00:33,060 So this is our code so far. 9 00:00:33,060 --> 00:00:35,370 This is our Sears says PCs. 10 00:00:35,400 --> 00:00:38,990 The hastier email so let's add our javascript. 11 00:00:39,000 --> 00:00:47,370 We've already made a reference to our javascript inside our hastier mail file courtesy of this great 12 00:00:47,370 --> 00:00:48,750 tag here online. 13 00:00:48,760 --> 00:00:50,020 Thirty two. 14 00:00:50,340 --> 00:00:54,980 So to create a new file a click on File go new. 15 00:00:55,260 --> 00:01:04,020 And I'm going to save these as a jab as crip farts do file save as is going to save into the same directory 16 00:01:04,530 --> 00:01:07,700 as RC SS and hastier mail. 17 00:01:07,940 --> 00:01:10,040 I am going to call this b. 18 00:01:10,130 --> 00:01:12,760 I dont. 19 00:01:12,910 --> 00:01:13,310 G. 20 00:01:13,510 --> 00:01:15,650 S in the dropdown. 21 00:01:15,650 --> 00:01:20,650 Im just going to say let java script which is this one here. 22 00:01:20,730 --> 00:01:21,420 Another click. 23 00:01:21,430 --> 00:01:22,410 See. 24 00:01:22,650 --> 00:01:27,860 So the I going to be added into this file is going to be javascript. 25 00:01:27,900 --> 00:01:34,370 See the bottom right here says javascript saw I am already pre stage to code. 26 00:01:34,380 --> 00:01:39,100 I'm going to add it on and I'll explain the code line by line. 27 00:01:39,180 --> 00:01:46,910 So here I have had the javascript code that all make the BMI calculator work. 28 00:01:47,010 --> 00:01:51,140 So let me run for the code with you on line two here. 29 00:01:51,280 --> 00:01:58,050 I've got a comment so anything that is a comment is ignored when the code executes. 30 00:01:58,270 --> 00:02:01,150 So this is a jab us group comment. 31 00:02:01,180 --> 00:02:06,150 So this this is what is known as a single line comment. 32 00:02:06,150 --> 00:02:10,830 So we could rantz it all just skip this comment and ignore it. 33 00:02:10,830 --> 00:02:17,480 Comments are useful because they help you explain your code to yourself and also to others. 34 00:02:17,520 --> 00:02:26,820 So here on line two is what is known as the formula for calculating the BMI. 35 00:02:27,150 --> 00:02:32,460 Okay so here B W is the weight. 36 00:02:32,460 --> 00:02:40,400 So basically the BMI formula is KG divided by height. 37 00:02:41,350 --> 00:02:43,450 Of a hundred times. 38 00:02:43,450 --> 00:02:46,210 Height divided by 100. 39 00:02:46,240 --> 00:02:50,700 Okay so this is basically how you lead the BMI. 40 00:02:50,840 --> 00:02:57,430 You do it as big fat which is in parentheses the height divided by a hundred times higher divided by 41 00:02:57,430 --> 00:03:00,850 100 hundred and then you divide that value back. 42 00:03:00,970 --> 00:03:04,950 The value in KG will give you a B. 43 00:03:05,290 --> 00:03:08,190 So this cagy basically is to wait. 44 00:03:08,190 --> 00:03:14,820 So this is the weight divided dividing the weight by the height. 45 00:03:16,630 --> 00:03:20,110 So landfall here with me is in the document. 46 00:03:20,140 --> 00:03:23,210 Get eliminated by Dean method. 47 00:03:23,470 --> 00:03:26,850 And inside the premises we are passing them. 48 00:03:26,860 --> 00:03:33,980 Submit submit physically is the botton here which is inside our heads here Mitchell document. 49 00:03:33,980 --> 00:03:38,330 If I scroll down here you can see this I.D. submit. 50 00:03:38,380 --> 00:03:42,210 That's what we're referring to inside this here. 51 00:03:42,490 --> 00:03:51,620 So we put him in this cell mate and we have also caught an event listner. 52 00:03:51,700 --> 00:03:55,220 So here we've got the AD event list. 53 00:03:55,240 --> 00:03:59,240 Now the documents had Event this. 54 00:03:59,250 --> 00:04:09,460 Now basically this is a method that attaches an event handler to the document and you can see we are 55 00:04:09,460 --> 00:04:16,230 attaching a click event to the BMI later on. 56 00:04:16,300 --> 00:04:17,230 Okay. 57 00:04:17,470 --> 00:04:27,980 So here now what we're seeing here the event we are attaching to this is the click event and when the 58 00:04:28,330 --> 00:04:35,690 bottom is click though this summary button is clicked on it all call this be my calculator. 59 00:04:35,860 --> 00:04:36,670 All right. 60 00:04:36,670 --> 00:04:42,420 This is a function which we are which I have defined here on line 5. 61 00:04:42,520 --> 00:04:47,980 So I find it function it be my calculator. 62 00:04:48,400 --> 00:04:56,840 And here have some variables here variables centimetre and we are using set in a causal pass end. 63 00:04:57,050 --> 00:05:08,280 The path basically is a function that passes is drink and returns an integer k.. 64 00:05:08,350 --> 00:05:09,790 That's what we're doing here. 65 00:05:09,830 --> 00:05:11,690 So we're passing a string. 66 00:05:11,920 --> 00:05:18,710 What return in an integer integer is a number and we is in a documento get eliminate idae. 67 00:05:18,760 --> 00:05:21,980 And the idea we're getting is the crm. 68 00:05:22,000 --> 00:05:29,430 Again if we going to are his team now we can see we see this see omeir refers to the input. 69 00:05:29,560 --> 00:05:33,890 So this implies here and this is a value. 70 00:05:33,910 --> 00:05:44,890 So any input that is entered into that text box is what is going to be converted in to an integer value 71 00:05:45,490 --> 00:05:48,200 because the hand text box is a tax. 72 00:05:48,280 --> 00:05:55,870 So we're going to convert it to you as in this past it here we've got a variable called cagy we use 73 00:05:55,870 --> 00:05:57,780 in the pass float. 74 00:05:58,030 --> 00:06:05,830 The parse flood function passes is string and returns a floating point number. 75 00:06:05,890 --> 00:06:13,770 This function determines the first character in the specified string is in number. 76 00:06:13,810 --> 00:06:25,000 If it is it passes the string on till it reaches the end of the number and then returns the number as 77 00:06:25,120 --> 00:06:28,950 in number and not drink. 78 00:06:29,020 --> 00:06:30,940 That's what the Flook does. 79 00:06:31,080 --> 00:06:34,540 Line 9 here defined in variable could be M. 80 00:06:34,560 --> 00:06:37,650 I had a variable chord. 81 00:06:37,700 --> 00:06:43,230 New seem set in the value of the variable here. 82 00:06:43,250 --> 00:06:52,250 Can you see em to pass float had them passing in the value centimetre divided by a hundred. 83 00:06:52,360 --> 00:06:56,270 Here the D BMI here variable B. 84 00:06:56,310 --> 00:07:03,650 I am set in that he was to be kg which is is the variable here. 85 00:07:04,300 --> 00:07:12,160 Divided by value which is this variable here time variable here as well. 86 00:07:12,160 --> 00:07:14,720 Here I am 30 again. 87 00:07:14,770 --> 00:07:18,490 The value of this BMI variable is going to change. 88 00:07:18,520 --> 00:07:28,930 I am going to set the value to equal to wmi DOT to fixed basically the fixed method is used to convert 89 00:07:29,050 --> 00:07:31,790 number into string. 90 00:07:31,890 --> 00:07:35,150 Keep in a specified number of decimal. 91 00:07:35,320 --> 00:07:44,200 In this case I have passed to 1 so it all have one decimal place consider log we don't necessarily need 92 00:07:44,200 --> 00:07:47,530 that Disney's Glees for troubleshooting purposes. 93 00:07:47,530 --> 00:07:54,640 So when you run your application you can see B value or so of the BMI inside consort. 94 00:07:54,670 --> 00:07:56,740 This is not and is not mandatory. 95 00:07:56,740 --> 00:08:01,310 You could actually comment that out or don't use it if you don't want to. 96 00:08:01,540 --> 00:08:06,390 I tend to like it so I can see what's happening in the console as well. 97 00:08:06,430 --> 00:08:08,990 Line 16 were worded document. 98 00:08:09,040 --> 00:08:14,930 Don't get a lemon by day and the idea is a result of it going to the here. 99 00:08:15,130 --> 00:08:16,100 Mail here. 100 00:08:16,270 --> 00:08:18,810 This is what is referring to. 101 00:08:19,280 --> 00:08:25,400 Okay so is getting the element BIOS result and is going to replace this Deve. 102 00:08:25,690 --> 00:08:28,330 The calculated value of the. 103 00:08:28,350 --> 00:08:37,510 My using the enhanced or tcom how to set the value of the BMI is on the calculated inputs. 104 00:08:37,960 --> 00:08:41,100 So that is basically it. 105 00:08:41,350 --> 00:08:47,230 So I'm just gonna say this and then we go and test to make sure everything works. 106 00:08:47,230 --> 00:08:52,520 Someone opened up the directory here and click on the BMI page. 107 00:08:52,540 --> 00:08:53,900 TMF far this one. 108 00:08:53,920 --> 00:08:58,660 So each time you after a fight it is the history of file that you run. 109 00:08:58,770 --> 00:09:04,960 And dont forget that from here a mail file I have linked but this he says and is javascript just going 110 00:09:04,960 --> 00:09:08,830 to double click on that and we can see. 111 00:09:08,860 --> 00:09:14,900 I'm just going to test its height in centimetre so I see 1 7 7 kg. 112 00:09:14,920 --> 00:09:19,430 I say maybe 85 a clear cut lead. 113 00:09:19,600 --> 00:09:21,350 I can see the value there. 114 00:09:21,430 --> 00:09:30,550 Okay so we've got our BMI calculator working as designed so basic for this project. 115 00:09:30,560 --> 00:09:36,100 If you have any issues whatsoever please do not hesitate to contact me. 116 00:09:36,190 --> 00:09:40,880 I'll be more than happy to help you take care and all the best.